<template>
  <div>
    <header>
        <div class="title">
            实时显示P4芯片相关信息(以显示所有Table为例)
        </div>
    </header>
    <div class="content">
        <div class="content_title">
            配置参数
        </div>

        <div class="inputBox">
            <el-form :model="form" ref="form"  label-width="200px" :inline="false" size="normal">
                
                <el-form-item label="下方显示结果显示时间间隔" label-width="400px"> 
                    <el-input v-model="form.time" style="width:50%"></el-input>
                </el-form-item>
                <el-form-item label="输入P4芯片Runtime命令" label-width="400px" >
                    <el-input v-model="form.mingling" style="width:50%"></el-input>
                </el-form-item>
                
                
            </el-form>
            <div class="btnBox">
                    <el-button type="primary" @click="onSubmit" :disabled="isDisabledSubmit">运行</el-button>
                    <el-button type="primary" @click="onSave" :disabled='isDisabled'>停止</el-button>
            </div >
            
        </div>
    </div>
    <div class="content">
        <div class="content_title">
            <pre v-if="textarea">{{textarea}}</pre>
            <div v-else>暂无数据</div>
        </div>
    </div>
  </div>
</template>

<script>
import {mapState} from "vuex"
export default {
    data(){
        return {
            form:{
                time:'',
                mingling:``,
            },
            textarea:'',
            commandId:'',
            isDisabled:true,
            isDisabledSubmit:false
        }
    },
    computed:{
        ...mapState(["sessionId","P4COMMAND"])
    },
    watch:{
        P4COMMAND : {
            handler (newName, oldName) {
                this.textarea = newName
                
            },
            immediate: false  // 配置项  作用，声明了 immediate: true 后，会立马执行监听的watch属性 firstName 里的 handler
        },
        commandId:{
            handler(newName,oldName){
                this.isDisabled = false
            },
            immediate:false
        }
    },
    methods: {
        onSave(){
            this.close()
            this.isDisabled = !this.isDisabled
        },
        onSubmit(){
            // this.close()
            this.$http({
                method: "post",
                url:'/p4Command',
                data:{
                    command: this.form.mingling,
                    param: "",
                    refreshInterval: this.form.time,
                    sessionId: this.sessionId
                }
            }).then(res=>{
                this.commandId = res.data.data.commandId
                this.isDisabledSubmit = true
                this.$message.success("请求成功")
                
            }).catch(err=>{
                this.$message.error('请求失败！')
            })
        },
        close(){
            if(this.commandId){
                this.$http({
                method:'delete',
                url:`/p4Command/${this.commandId}/${this.sessionId}`,
                }).then(()=>{
                    this.$message.success("停止成功")
                })
            }
            this.isDisabledSubmit = false
        
        }
    },
    beforeDestroy(){
        this.close()
    }
}
</script>

<style scoped lang="less">
header{
    font-size: 24px;
    .title{
        color: #000;
        margin-bottom: 20px;
    }
    .header_content{
        color: #999;
        font-size: 13px;
        margin-bottom: 20px;
    }
}
.content{
    box-shadow: 0 0 10px #DEE1E6;
    margin: 30px 0;
    padding: 20px;
    font-size: 12px;
    .content_title{
        font-size: 14px;
        margin-left: 5px;
    }
    .inputBox{
        margin: 20px 0;
        .boxItem{
            // display: flex;
            // justify-content: space-around;
            margin: 10px 0;
            span{
                display: inline-block;
                width: 30%;
                text-align: right;
                margin-right: 10px;
            }
        }
        .btnBox{
            display: flex;
            justify-content: flex-end;
            margin-right: 50px;
        }
    }
    .action_head{
        span{
            margin-right: 20px;
        }
    }
    .progress{
        width: 20%;
        margin-top:20px ;
    }
    header{
        margin-top: 40px;
    }
    .textArea{
        padding: 10px;
        margin-bottom: 20px;
        textarea{
            width: 100%;
            resize: none;
        }
        .buttonBox{
            float: right;
            margin: 30px 0;
        }
    }
}
</style>